import React from 'react';
import type { Session } from '../types/wechat';

const ChatList: React.FC<{
  sessions: Session[];
  selectedId: string | null;
  onSelect: (id: string) => void;
  onSearch: (kw: string) => void;
}> = ({ sessions, selectedId, onSelect, onSearch }) => (
  <div className="chat-list">
    <input
      type="text"
      placeholder="搜索"
      onChange={e => onSearch(e.target.value)}
      className="chat-search"
    />
    <div className="chat-sessions">
      {sessions.map(session => (
        <div
          key={session.id}
          className={`chat-session ${selectedId === session.id ? 'active' : ''}`}
          onClick={() => onSelect(session.id)}
        >
          <img src={session.avatar} alt={session.name} className="avatar" />
          <div className="chat-info">
            <div className="chat-name">{session.name}</div>
            <div className="chat-last">{session.lastMessage}</div>
          </div>
          <div className="chat-time">{session.lastTime}</div>
        </div>
      ))}
    </div>
  </div>
);

export default ChatList; 